<template>
  <div class="login">
    <div class="container">
      <div class="pic"></div>
      <div class="form">
        <center>
          <div class="logo">
            <img src="/images/logo.png" style="width: 120px; height: 120px" />
          </div>
          <div class="title">
            <span>{{ mainStore.systemName }}</span>
            <p>{{ mainStore.systemNameEn }}</p>
          </div>
        </center>
        <n-form ref="formRef" :model="loginForm" style="padding: 20px" :show-label="false">
          <n-form-item path="username">
            <n-input v-model:value="loginForm.username" placeholder="请输入用户名" />
          </n-form-item>
          <n-form-item path="password">
            <n-input v-model:value="loginForm.password" placeholder="请输入密码" type="password" show-password-on="mousedown"
              :maxlength="16" />
          </n-form-item>
          <n-form-item path="mobeil" v-if="isregirster">
            <n-input v-model:value="loginForm.mobeil" placeholder="请输入确认密码" type="password" show-password-on="mousedown"
              :maxlength="11" />
          </n-form-item>
          <n-button type="primary" style="width: 100%; margin-top: 20px" @click="login" strong secondary>
            <template #icon>
              <n-icon>
                <login-icon />
              </n-icon>
            </template>
            {{ isregirster ? '注册账号' : '登陆账号' }}
          </n-button>
          <div v-if="!isregirster" class="regirster" @click="handleChangeOpt(true)">去注册？</div>
          <div v-else class="regirster" @click="handleChangeOpt(false)">去登陆？</div>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { LogInFilled as LoginIcon } from '@vicons/material';
import { reactive, ref } from 'vue';
import { useMainStore } from '@/store';
import { useMessage } from 'naive-ui';
import Cookie from '@/utils/cookie';
import api from '@/api';
let isregirster = ref(false);
let loginForm = reactive({
  username: '',
  password: '',
  mobeil: ''
});

let message = useMessage();
const mainStore = useMainStore();
const API_REGISTER = () => {
  api.register(loginForm).then(res => {
    if (res.code) {
      return message.warning(res.msg);
    }
    isregirster.value = false
    message.success('注册成功');

  });
};
const handleChangeOpt = (v) => {
  loginForm.password = loginForm.username = ''
  isregirster.value = v
}
const login = () => {
  if (isregirster.value) {
    API_REGISTER();
  } else {
    mainStore.login(loginForm);
  }
};
</script>

<style lang="scss" scoped>
.login {
  //
  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    float: right;
    width: 1000px;
    height: 600px;
    overflow: hidden;
    border-radius: 30px;
    display: flex;

    @include themeify {
      background: theme('bg_base');
      box-shadow: theme('shadow');
    }

    .pic {
      flex: 2;
      background: url(/images/login-pic.jpg);
      background-size: 100% 100%;
    }

    .form {
      flex: 1;
      padding-top: 40px;
    }

    .regirster {
      float: right;
      margin-top: 3px;
      font-size: 15px;
      text-decoration: underline;
      color: #0000ff8f;
      cursor: pointer;
    }
  }

  .title {
    font-size: 20px;
    background-clip: text;
    -webkit-background-clip: text;

    @include themeify {
      background-image: linear-gradient(to right, theme('font'), rgba(theme('font'), 0.4));
    }

    color: transparent;

    p {
      font-size: 11px;
      line-height: 5px;
      height: 10px;
    }
  }
}
</style>
